
.btn-3{

    width:600px;
    height:400px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.btn-3 button{
	top: 40%;
    left:50%;
    transform:translateX(-50%);
    position: relative;
    text-decoration: none;
    font-size:24px;
    display:block;
    width:200px;
    height:40px;
    text-align:center;
    line-height:40px;
    overflow:hidden;
    margin-top:20px;
    transition:0.8s linear;
    box-sizing: border-box;

}
.btn-3 button::before{
    left:0;
    content:"";
    position:absolute;
    z-index:-1;
    transition: 0.8s linear;
}
.btn-3 button.up{
    color:#ff6348;

    border:1px solid #ff6348;
}
.btn-3 button.up::before{
    top:0;
    width:100%;
    height:0;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    background:#ff6348;
}
.btn-3 button.up:hover::before{
    height:200%;
}
.btn-3 button.up:hover{
    color:black;
}
.btn-3 button.left{
    color:#1e90ff;
    border:1px solid #1e90ff;
}

.btn-3 button.left::before{
    top:0;
    width: 0;
    height:100%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background:#1e90ff;
}
.btn-3 button.left:hover::before{
    width:200%;
}
.btn-3 button.left:hover{
    color:white;
}
